<script>
import axios from 'axios';
import * as echarts from 'echarts';
export default{
  data(){
    return {
      influence:["电梯","产权性质","装修程度","楼层","地区","房屋面积"],
      citys: ["北京","上海","郑州","长沙","广州","重庆","哈尔滨","武汉"],
      activeIndex:"1",
      city:"北京",
    }
  },
  methods: {
    getChart(url,params,chart){
      console.log(url)
      axios.get(url,{params:params})
      .then( (response) => {
        console.log(response.data)
        chart.setOption(response.data)
      })
    },
    handleSelect(key,keyPath){
      var city = this.citys[key[2]];
      if(key[0]==4){
        if(key[2]==0){
          this.$router.push({path:"/pred/"+this.city,replace:true})
        }else if(key[2]==1){
          this.$router.push({path:"/ana",replace:true})
        }
      }
      else if (key[0]==3){
        this.$router.push({path:"/compare",replace:true})  
      }else if(key[0]==2){
        this.$router.push({path:"/influence/"+this.city+"/"+key[2],replace:true})  
      }else if(key[0]==1){
        this.city = city
        this.$router.push({path:"/charts/"+city,replace:false})
      }else if(key[0]==5){
        this.$router.push({path:"/map/"+this.city,replace:true})  
      }
    }
  },
  mounted () {
    let title = echarts.init(document.getElementById("title"));
    let option = {
      graphic: {
        elements: [
          {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '房小智',
              fontSize: 60,
              fontWeight: 'bold',
              lineDash: [0, 200],
              lineDashOffset: 0,
              fill: 'transparent',
              stroke: '#000',
              lineWidth: 1
            },
            keyframeAnimation: {
              duration: 2000,
              loop: false,
              keyframes: [
                {
                  percent: 0.7,
                  style: {
                    fill: 'transparent',
                    lineDashOffset: 200,
                    lineDash: [200, 0]
                  }
                },
                {
                  // Stop for a while.
                  percent: 0.8,
                  style: {
                    fill: 'transparent'
                  }
                },
                {
                  percent: 1,
                  style: {
                    fill: '#5028a2'
                  }
                }
              ]
            }
          }
        ]
      }
    };
    title.setOption(option)
  },  
}
</script>
<template>
  <el-container class="container">
    <el-header class="header">
      <el-menu
        class="menu"
        mode="horizontal"
        :ellipsis="false"
        :default-active="activeIndex"
        @select="handleSelect"
      >
        <div class="logo-container">
          <img src="./assets/logo.png" class="logo">
          <div id="title"></div>
        </div>
        <div class="tool">
          <el-sub-menu index="1">
              <template #title>城市选择</template>
              <el-menu-item v-for="(city,idx) in citys" :key="idx" :index="'1-'+idx.toString()">{{ city }}</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
              <template #title>房价影响因素</template>
              <el-menu-item v-for="(influ,idx) in influence" :key="idx" :index="'2-'+idx.toString()">{{ influ }}</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="3">历年房价对比</el-menu-item>
          <el-sub-menu index="4">
              <template #title>房价预测</template>
              <el-menu-item v-for="(influ,idx) in ['年代预测','价格预测']" :key="idx" :index="'4-'+idx.toString()">{{ influ }}</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="5">查看地图</el-menu-item>
        </div>
      </el-menu>
    </el-header>
    <el-main >
      <RouterView/>
    </el-main>
  </el-container>  
</template>

<style scoped>

  .container{
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
  }
  .header{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 15%; 
    width: 100%;
    margin-top: 0px
  }
  .menu{
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 0px;

    .logo-container{
      display: flex;
      align-items: center;
      justify-content:center;
      img{
        margin:10px;
        width: 150px;
        height: 150px
      }
    };

    .tool {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 100%;
      justify-content: end;
      
    }
  }
  el-main{
    height: 70%;
    width:100%;

    
  }
  .charts {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }
  #bar{
    width: 45%;
    height: 100%;
  }
  #title{
    width: 200px;
    height: 100px;
  }
  #pie{
    width: 45%;
    height: 100%;
  }
  #scatter{
    width: 45%;
    height: 100%;
  }
  #line{
    width: 45%;
    height: 100%;
  }
  #map{
    width: 45%;
    height: 100%;
  }
</style>
